WindiCSS

文档

官网：https://windicss.org/

中文官网：https://cn.windicss.org/

配置

Vite

语法提示需安装vscode插件 WindiCSS IntelliSense

windi.config.ts 该文件必须在根目录下

import { defineConfig } from 'windicss/helpers'
import formsPlugin from 'windicss/plugin/forms'

export default defineConfig({
    darkMode: 'class',
    safelist: 'p-3 p-4 p-5',
    theme: {
        extend: {
            colors: {
                teal: {
                    100: '#096',
                },
            },
        },
    },
    extract: {
        include: ['src/**/*.{vue,html,jsx,tsx}'],
        exclude: ['node_modules', '.git'],
    },
    plugins: [formsPlugin],
})

vite.config.ts

import WindiCSS from 'vite-plugin-windicss'

export default defineConfig({
  plugins: [
    WindiCSS(),
  ]
})

main.ts

import 'virtual:windi.css'